<!--
    列表集合
    @event  load 加载事件
    @param  pageSize 每页条数
    @param  totalCount  总条数
    @param  loading  加载遮罩
-->
<style lang="scss">
    .je-vue-listview{
        padding: 10px;

        .listview-body{
            overflow: auto;
            position: relative;
            .listview-item{
                position: relative;
                font-size: 14px;
                color: #333333;
                &:hover{
                    color:#2f6bcf;
                }
            }
            .empty-text{
                background-image: url(./assets/je-nodata.png);
                background-size: 100% 100%;
                width: 120px;
                height: 130px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -60px;
                margin-left: -65px;
            }
            .new-empty-text {
                width: 120px;
                height: 130px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                > .n-empty-img {
                    background-image: url(./assets/nodata.png);
                    background-size: 100% 100%;
                    width: 120px;
                    height: 110px;
                }
                > .n-empty-text {
                    margin: 0;
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    font-size: 16px;
                    color: rgba(161, 173, 182, 1);
                }
            }
        }
        .je-vue-pagebar{
            margin-top: 10px;
        }
    }
</style>
<template>
  <div class="je-vue-listview">
    <div
      :style="bodyStyle"
      class="listview-body"
    >
      <div class="listview-items">
        <slot name="listitem" />
      </div>
      <!-- 数据项 -->
      <!-- <div
        v-show="totalCount == 0"
        class="empty-text"
      /> -->
      <div
        v-show="totalCount == 0"
        class="new-empty-text"
      >
        <div class="n-empty-img" />
        <p class="n-empty-text">
          {{ lang == 'zh_CN' ? '没有数据' : 'No data' }}
        </p>
      </div>
    </div>
    <!-- 分页条 -->
    <je-pagebar
      ref="pagebar"
      :page-size="pageSize"
      :total-count="totalCount"
      @load="_buildData"
    />
  </div>
</template>
<script>
import PageBar from './pagebar.vue';

export default {
  name: 'JeListview',
  components: { 'je-pagebar': PageBar },
  props: {
    itemHeight: {
      type: Number,
      default: 50,
    },
    emptyHeight: {
      type: Number,
      default: 60,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    totalCount: {
      type: Number,
      default: 0,
    },
    en: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      lang: 'zh_CN',
    };
  },
  computed: {
    bodyStyle() {
      const bodyHeight = JE.getBodyHeight();
      const { itemHeight } = this;
      const { emptyHeight } = this;
      const padding = 20;
      let height = (this.pageSize / 2) * itemHeight + padding;
      if (height + emptyHeight > bodyHeight) {
        height = bodyHeight - emptyHeight;
      }
      return { height: `${height}px` };
    },
  },
  mounted() {
    this.lang = JE.getCookies('je-local-lang') || 'zh_CN';
  },
  methods: {
    /**
             * 分页条
             */
    getPageBar() {
      return this.$refs.pagebar;
    },
    /**
             * 获得分页信息
             */
    getPageInfo() {
      return this.getPageBar().getPageInfo();
    },
    /**
             * 加载第一页数据
             */
    load() {
      this.getPageBar().movePage(1);
    },
    /**
             * 加载分页数据
             */
    loadPage(page) {
      this.getPageBar().movePage(page);
    },
    /**
             * 刷新数据
             */
    refresh() {
      this.getPageBar().refresh();
    },
    /**
             * 构建数据
             */
    _buildData(pageInfo) {
      this.$emit('buildData', pageInfo);
    },
  },
};
</script>
